<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <!-- 这里可以添加CSS样式文件 -->
  </head>
  <body>
     <script type="importmap">
      {
        "imports": {
          "three": "https://threelab.cn/threejs/build/three.module.js",
          "three/addons/": "https://threelab.cn/threejs/examples/jsm/",
          "3d-tiles-renderer": "./js/3dTilesRenderer/index.js"
        }
      }
    </script>
    <script type="module">
      import * as THREE from "three";
      import { OrbitControls } from "three/addons/controls/OrbitControls.js";
      import { TilesRenderer } from "3d-tiles-renderer";

      // 可选 是否使用
      import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
      import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";

      

      const scene = new THREE.Scene();

      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );

      camera.position.set(0, 30, 30);

      const renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
        logarithmicDepthBuffer: true,
      });

      renderer.setSize(window.innerWidth, window.innerHeight);

      document.body.appendChild(renderer.domElement);

      const controls = new OrbitControls(camera, renderer.domElement);

      scene.add(new THREE.AxesHelper(1000));

      scene.add(new THREE.GridHelper(100, 20));

      window.onresize = () => {
        renderer.setSize(window.innerWidth, window.innerHeight);

        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();
      };

      const tilesRenderer = new TilesRenderer(
        "https://www.threelab.cn/cdn/3dtiles/test/tileset.json"
      );

      // 可选 gltf draco 配置
      const loader = new GLTFLoader();

      loader.setDRACOLoader(
        new DRACOLoader().setDecoderPath(
          "./js/three/draco/"
        )
      );

      tilesRenderer.manager.addHandler(/\.gltf$/, loader);

      tilesRenderer.progress = (e) => console.log(e);

      tilesRenderer.complete = (e) => console.log("complete");

      tilesRenderer.setCamera(camera);

      tilesRenderer.setResolutionFromRenderer(camera, renderer);

      const model = new THREE.Group().add(tilesRenderer.group);

      scene.add(model);

      //每一个切片加载
      tilesRenderer.onLoadModel = function (group, origin) {};

      const box3 = new THREE.Box3();

      // 模型加载时
      tilesRenderer.onLoadTileSet = (g, k, l) => {
        // 纠正模型位置 根据包围盒子或者包围球使用边界框来定义合理的中心，然后像这样偏移网格的位置来自动进行重新定位
        if (tilesRenderer.getBoundingBox(box3)) {
          box3.getCenter(tilesRenderer.group.position);

          tilesRenderer.group.position.multiplyScalar(-1);
        }
      };

      animate();

      function animate() {
        requestAnimationFrame(animate);

        controls.update();

        tilesRenderer.update();

        renderer.render(scene, camera);
      }
    </script>
  </body>
</html>
